<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
    custom-class="dialog-my"
  >
    <el-form :model="form" ref="myform" :rules="rules" label-width="80px">
      <el-divider content-position="left">基础设置</el-divider>

      <el-form-item label="方案名称" prop="schemeName">
        <el-input
          v-model="form.schemeName"
          autocomplete="off"
          style="width: 244px"
        ></el-input>
      </el-form-item>
      <el-form-item label="权重值" prop="weightedValue">
        <el-input
          v-model="form.weightedValue"
          autocomplete="off"
          style="width: 244px"
        ></el-input>
      </el-form-item>
      <el-divider content-position="left">时间设置</el-divider>

      <el-radio label="1" v-model="form.scheme"> 常规日期选择</el-radio>
      <el-checkbox-group
        v-model="weeks"
        style="margin: 20px"
        :disabled="form.scheme == 1 ? false : true"
      >
        <el-checkbox label="1">周一</el-checkbox>
        <el-checkbox label="2">周二</el-checkbox>
        <el-checkbox label="3">周三</el-checkbox>
        <el-checkbox label="4">周四</el-checkbox>
        <el-checkbox label="5">周五</el-checkbox>
        <el-checkbox label="6">周六</el-checkbox>
        <el-checkbox label="7">周日</el-checkbox>
      </el-checkbox-group>
      <el-radio label="2" v-model="form.scheme">自定义日期选择</el-radio>
      <div>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addDate"
          style="margin: 20px"
          :disabled="form.scheme == 2 ? false : true"
          >新增日期</el-button
        >
        <div
          v-for="(item, index) in myDate"
          :key="index"
          style="margin: 10px 0"
        >
          <el-date-picker
            type="date"
            v-model="item.value"
            placeholder="选择日期"
            :disabled="form.scheme == 2 ? false : true"
            value-format="yyyyMMdd"
          ></el-date-picker>
          <el-button
            type="danger"
            v-if="index != 0"
            icon="el-icon-delete"
            circle
            @click="subtraction(index)"
          ></el-button>
        </div>
      </div>
      <el-divider content-position="left">场地设置</el-divider>
      <el-form-item prop="itemId" label="项目">
        <el-select
          v-model="form.itemId"
          placeholder="请选择项目"
          @change="getRegonId"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in itemList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="场区" prop="regionId">
        <el-select
          v-model="form.regionId"
          placeholder="请选择场区"
          @change="getCities"
        >
          <el-option
            :label="item.regionName"
            :value="item.id"
            v-for="item in regionList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <div style="margin-top: 30px" v-if="cities.length">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0"></div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox v-for="city in cities" :label="city" :key="city.id">{{
            city.siteName
          }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { itemPageList, regionPageList, sitePageList, schemeSave, schemeShow } from '@/config/api'
export default {
  data () {
    return {
      dialogFormVisible: false,
      title: '',
      myDate: [{ valut: '' }],
      itemList: [],
      regionList: [],
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
      weeks: [],
      form: {
        schemeName: undefined,
        weightedValue: undefined,
        weeks: undefined,
        scheme: undefined,
        gymSchemeSiteList: [
        ],
        specialDateList: [
        ],
        itemId: undefined,
        regionId: undefined,
        checkedCitiesState: undefined
      },
      rules: {
        schemeName: [
          { required: true, message: '请输入方案名称', trigger: 'blur' }],
        weightedValue: [
          { required: true, message: '请输入权重值', trigger: 'blur' }],
        itemId: [
          { required: true, message: '请选择项目', trigger: 'change' }
        ],
        regionId: [
          { required: true, message: '请选择场区', trigger: 'change' }
        ],
      }
    }
  },
  methods: {
    handleCheckAllChange (val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    addShow () {
      this.resetFields()
      this.title = '新增'
      this.getItem()
      this.dialogFormVisible = true
    },
    editShow (record) {
      this.resetFields()
      console.log(record)
      this.getDetail(record)
      this.getItem()
      this.title = '编辑'
      this.dialogFormVisible = true
    },
    addDate () {
      this.myDate.push({ valut: '' })
    },
    getItem () {
      itemPageList().then(res => {
        this.itemList = res.data.result.list
      })
    },
    getRegion (id) {
      regionPageList({ gymProductId: id }).then(res => {
        this.regionList = res.data.result.list
      })
    },
    getSite () {
      sitePageList({ regionId: this.form.regionId }).then(res => {
        this.cities = res.data.result.list
        if (this.form.gymSchemeSiteList.length) {
          this.cities.map(item => {
            this.form.gymSchemeSiteList.map(g => {
              if (item.id == g.siteId) {
                this.checkedCities.push(item)
              }
            })
          })
        }
      })
    },
    subtraction (index) {
      this.myDate.splice(index, 1)
    },
    getRegonId () {
      this.getRegion(this.form.itemId)
    },
    getCities () {
      this.getSite()
    },
    getDetail (record) {
      schemeShow({ id: record.id }).then(res => {
        this.form = {
          id: record.id,
          schemeName: res.data.result.schemeName,
          weightedValue: res.data.result.weightedValue,
          weeks: res.data.result.weeks,
          scheme: res.data.result.scheme,
          gymSchemeSiteList: [],
          specialDateList: res.data.result.specialDateList,
          itemId: res.data.result.itemId,
          regionId: res.data.result.regionId
        }
        this.getRegion(this.form.itemId)
        this.myDate = []
        if (res.data.result.scheme == 1) {
          this.weeks = res.data.result.weeks.split(',')
        } else if (res.data.result.scheme == 2) {
          res.data.result.specialDateList.map(item => {
            this.myDate.push({ value: item })
          })
        }

        res.data.result.gymSchemeSiteList.map(item => {
          this.form.gymSchemeSiteList.push({ siteId: item.siteId, regionId: item.regionId })
        })
        this.getSite()
      })
    },
    resetFields () {
      this.form = {
        schemeName: undefined,
        weightedValue: undefined,
        weeks: undefined,
        scheme: undefined,
        gymSchemeSiteList: [
        ],
        specialDateList: [
        ],
        itemId: undefined,
        regionId: undefined
      }
      this.myDate = [{ valut: '' }]
      this.checkedCities = []
      this.siteId = undefined
      this.cities = []
      this.weeks = []

    },
    submit () {
      console.log(this.myDate)
      if (this.form.scheme == 1) {
        if (!this.weeks.length) {
          this.$confirm('请选择常规日期?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          return false
        }
        this.form.weeks = this.weeks.toString()
        this.form.specialDateList = []
      } else if (this.form.scheme == 2) {

        let dataState = false
        this.form.weeks = ""
        this.form.specialDateList = []
        this.myDate.map(item => {
          if (item.value) {
            dataState = true

          }
          this.form.specialDateList.push(item.value)
        })
        if (!dataState) {
          this.$confirm('请选择自定义日期?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          return false
        }
      } else {
        this.$confirm('请选择时间设置?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        return false
      }
      if (!this.checkedCities.length) {
        this.$confirm('请选择场地?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        return false
      }
      this.$refs['myform'].validate((valid) => {
        if (valid) {
          this.form.gymSchemeSiteList = []
          this.checkedCities.map(item => {
            this.form.gymSchemeSiteList.push({ siteId: item.id, regionId: this.form.regionId })
          })
          schemeSave(this.form).then(res => {
            this.$parent.getData()
            this.dialogFormVisible = false
            this.$message({
              message: '操作成功',
              type: 'success'
            });
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
  }
}
</script>
<style>
</style>